CENTRO DE CIENCIAS BÁSICAS
INGENIERÍA EN SISTEMAS COMPUTACIONALES
Primeros pasos cifrando
Alumnos:
Nombre:
ID:
Escareño Pérez Armando
246518
Hernández Martínez Leonardo Javier
274258
Varela Martínez Jaime Adolfo
295482
8° B
Docente:
Ocampo Silva Arturo
Curso:
Seguridad en Sistemas
Aguascalientes, Ags. Febrero de 2024
Índice
Introducción .................................................................................................................................... 1
Objetivo ........................................................................................................................................... 3
Desarrollo ........................................................................................................................................ 3
Conclusión ..................................................................................................................................... 13
1
Introducción
Escareño Pérez Armando: El cifrado es una parte esencial de la seguridad de la información y la
privacidad en la era digital. Uno de los métodos de cifrado más antiguos y conocidos es el cifrado
César, nombrado así por Julio César, quien, según se informa, lo utilizó para comunicaciones seguras.
Este método es un tipo de cifrado por sustitución que implica cambiar cada letra en el texto original
por una letra un número determinado de posiciones más adelante en el alfabeto. A pesar de su
simplicidad, el cifrado César juega un papel crucial en la introducción de los conceptos básicos de
cifrado y seguridad de la información. Aunque en la actualidad existen métodos de cifrado más
sofisticados y seguros, el cifrado César sigue siendo relevante para entender los fundamentos del
cifrado y cómo se puede utilizar para proteger la información. Además, este método de cifrado puede
ser útil en situaciones donde el nivel de seguridad requerido no es muy alto, o como una capa adicional
de seguridad en combinación con otros métodos de cifrado más robustos. Sin embargo, es importante
recordar que ninguna técnica de cifrado es completamente segura y que la seguridad de la información
depende tanto de la robustez del algoritmo de cifrado como de cómo se manejan y se protegen las
claves de cifrado.
Hernández Martínez Leonardo Javier: En esta práctica, se presenta un algoritmo de cifrado y
descifrado implementado en JavaScript. El propósito de este algoritmo es proporcionar una forma de
proteger la información mediante la aplicación de un cifrado basado en un valor de módulo. Esta
técnica de cifrado utiliza una fórmula matemática para alterar los caracteres del texto original, lo que
dificulta su comprensión para cualquier persona que no tenga acceso a la clave de descifrado.
El algoritmo se divide en varias funciones clave: cifrar(), actualizar(), y actualizarR(). La función
cifrar() se encarga de aplicar el cifrado o descifrado al texto según el valor del módulo y el parámetro
de cifrado proporcionado. Por otro lado, las funciones actualizar() y actualizarR() se utilizan para
actualizar dinámicamente los campos de texto con los resultados cifrados y descifrados,
respectivamente, en respuesta a los eventos de entrada del usuario.
A través de esta práctica, se busca proporcionar una comprensión práctica de los conceptos básicos
de cifrado y descifrado, así como también fomentar la familiaridad con el uso de event listeners para
actualizar la interfaz de usuario en tiempo real en respuesta a las acciones del usuario.
Varela Martínez Jaime Adolfo: A medida que fue posible almacenar información, se necesitaron
desarrollar métodos para protegerla y evitar que cayera en manos de individuos no autorizados. Uno
de los métodos más importantes fue el cifrado César. Este método consiste en desplazar el valor de
cada letra una cantidad específica de posiciones en el alfabeto. Aunque pueda parecer simple, resulta
bastante interesante. Aunque hoy en día pueda no parecer muy sofisticado, en su momento fue una
herramienta invaluable para resguardar la información.
Es importante adentrarnos en términos de código, es importante comprender qué es ASCII. En
términos simples, ASCII es un conjunto de caracteres utilizado para representar texto en sistemas
informáticos. Cada carácter está asociado a un número único, lo que facilita la comunicación y el
intercambio de información entre diferentes dispositivos y programas. Por otro lado, Unicode es un
estándar de codificación de caracteres que va más allá de ASCII al asignar un número único a cada
símbolo, letra o carácter utilizado en la escritura de la mayoría de los idiomas del mundo, así como
también caracteres especiales, emojis y símbolos gráficos. Como herramientas solo haremos uso de
HTML, CSS y JavaScript.
2
3
Objetivo
El propósito de este proyecto es crear un sitio web que permita a los usuarios introducir texto y cifrarlo
según el método y módulo de su elección. La plataforma ofrecerá una variedad de módulos de cifrado
para adaptarse a las preferencias individuales de los usuarios. Entre estos módulos, se empleará como
base la codificación ASCII y se incluirá una opción para utilizar el estándar Unicode que amplía las
posibilidades de cifrado al admitir una gama más amplia de caracteres y símbolos, lo que resulta
especialmente útil para idiomas que utilizan alfabetos no latinos y para la representación de emojis y
otros símbolos gráficosbrindando así flexibilidad y versatilidad en el proceso de cifrado.
El proceso de cifrado se llevará a cabo de manera transparente para el usuario, quien podrá seleccionar
el método de cifrado deseado y proporcionar el texto original. El sitio web realizará entonces las
operaciones necesarias según el algoritmo seleccionado y devolverá el mensaje cifrado al usuario.
Desarrollo
La parte principal de nuestro código es el index donde se tendrá un sidebar como menú para el usuario
y un apartado donde será visible el contenido visualizado, dando esto como resultado:
<body>
<div class="sidebar">
<img src="assets/images/icon.png" />
<ul>
<li><a href="pages/inicio.html" target="contenido">Inicio</a></li>
<hr class="line" />
<p class="subtitle">ASCII</p>
<li><a href="pages/cifrarA.html" target="contenido">Cifrar</a></li>
<li>
<a href="pages/descifrarA.html" target="contenido">Descifrar</a>
</li>
<hr class="line" />
<p class="subtitle">UNICODE</p>
<li><a href="pages/cifrarU.html" target="contenido">Cifrar</a></li>
<hr class="line" />
<li>
<a href="pages/Documentacion-CifradoCesar.html" target="contenido"
>Documentación</a
>
4
</li>
</ul>
</div>
<div class="content">
<span>
<iframe name="contenido" src="" frameborder="0"></iframe>
</span>
</div>
<script src="scripts/script.js"></script>
</body>
Yendo en orden por el menú establecido se documentaran los demás elementos, en inicio no hay
mucho que explicar, solo se introduce las instrucciones dadas por el docente.
En parte de cifrar es igual tanto para UNICODE y ASCII cuando hablamos de HTML:
<body>
<section class="content">
<fieldset class="module">
<label for="modulo"
>Modulo:
<input id="modulo" type="number" value="1" required />
</label>
<p id="error">¡El rango permitido para módulo es de 1 a 94!</p>
</fieldset>
<fieldset class="codify">
<div class="text">
<label for="texto"
>Texto: <br /><textarea id="texto" rows="10" placeholder="Escribe aquí..."></textarea>
</label>
</div>
<div class="result">
<label for="resultado"
5
>Cifrado césar: <br /><textarea id="resultado" rows="10" placeholder="Aquí se mostrará tu mensaje
cifrado..."></textarea>
</label>
</div>
</fieldset>
</section>
<script src="../scripts/cifrarA.js"></script>
</body>
Sólo se tiene un lugar donde se introduce el número del módulo y dos recuadros donde se introduce
el texto y da la salida. Por parte de JavaScript tenemos este código para ASCII:
document.addEventListener("DOMContentLoaded", function () {
const moduloInput = document.getElementById("modulo");
const textoInput = document.getElementById("texto");
const resultadoOutput = document.getElementById("resultado");
const errorLabel = document.getElementById("error");
function cifrar(texto, modulo, cifrar) {
let resultado = "";
for (let i = 0; i < texto.length; i++) {
let charCode = texto.charCodeAt(i);
if (charCode >= 32 && charCode <= 126 && charCode !== 127) {
let nuevoCharCode;
//console.log(charCode);
nuevoCharCode = ((charCode - 32 + modulo * cifrar) % 95) + 32;
if (nuevoCharCode < 32) {
nuevoCharCode += 95;
}
resultado += String.fromCharCode(nuevoCharCode);
} else {
resultado += texto[i];
}
6
}
return resultado;
}
function actualizar() {
const modulo = parseInt(moduloInput.value);
if (isFinite(modulo) && modulo >= 1 && modulo <= 94) {
errorLabel.style.opacity = 0;
const textoOriginal = textoInput.value;
const textoCifrado = cifrar(textoOriginal, modulo, 1);
resultadoOutput.value = textoCifrado;
} else {
errorLabel.style.opacity = 1;
return;
}
}
function actualizarR() {
const modulo = parseInt(moduloInput.value);
if (isFinite(modulo) && modulo >= 1 && modulo <= 94) {
errorLabel.style.opacity = 0;
const textoCifrado = resultadoOutput.value;
const textoDescifrado = cifrar(textoCifrado, modulo, -1);
textoInput.value = textoDescifrado;
} else {
errorLabel.style.opacity = 1;
return;
}
}
textoInput.addEventListener("input", actualizar);
moduloInput.addEventListener("input", actualizar);
7
resultadoOutput.addEventListener("input", actualizarR);
});
En este código agregamos un listener que va a estar escuchando cuando se haga algún cambio en los
lugares de entrada, el cual llama a las funciones actualizar, actualizar obtiene el número introducido
como módulo con rango de 1 a 94 que es nuestro cifrado útil y llamamos a cifrar. Cifrar obtiene los
códigos ASCII del texto y verifica si está entre el 32 y el 126 y sumaremos el modulo.
Para UNICODE solo cambiamos los limites a esto:
if (isFinite(modulo) && modulo >= 1 && modulo <= 65535) {
errorLabel.style.opacity = 0;
const textoOriginal = textoInput.value;
const textoCifrado = cifrar(textoOriginal, modulo, 1);
resultadoOutput.value = textoCifrado;
Para cifrar seria simplemente esto.
Para descifrar es un poco distinto, en HTML tenemos:
<body>
<section class="content">
<fieldset class="codify">
<label for="texto"
>Texto: <br /><textarea
id="texto"
rows="10"
placeholder="Escribe aquí..."
></textarea>
</label>
</fieldset>
<div class="result" id="result">
</div>
</section>
<script src="../scripts/descifrarA.js"></script>
</body>
8
Aquí solo tenemos un recuadro donde poner el texto cifrado y se mostrarán todas los textos
descifrados en el rango 1 a 94 como módulo.
document.addEventListener("DOMContentLoaded", function () {
var resultados = document.getElementById("result");
const textoInput = document.getElementById("texto");
function descifrar(texto, modulo) {
let resultado = "";
for (let i = 0; i < texto.length; i++) {
let charCode = texto.charCodeAt(i);
if (charCode >= 32 && charCode <= 126 && charCode !== 127) {
let nuevoCharCode;
nuevoCharCode = ((charCode - 32 - modulo) % 95) + 32;
if (nuevoCharCode < 32) {
nuevoCharCode += 95;
}
resultado += String.fromCharCode(nuevoCharCode);
} else {
resultado += texto[i];
}
}
return resultado;
}
function actualizar() {
const texto = textoInput.value;
let resultadosD = "";
for (var i = 0; i < 32; i++) {
for (var ii = 0; ii < 3; ii++) {
var contador = i * 3 + ii + 1;
if (contador <= 94) {
resultadosD +=
"<p>Modulo: " +
9
contador +
"<br>" +
descifrar(texto, contador) +
"</p>";
}
}
}
resultados.innerHTML = resultadosD;
}
textoInput.addEventListener("input", actualizar);
});
Aquí se ciclará del 1 hasta el 94 cambiando el texto por cada uno de eso módulos y se imprimirán
todos en pantalla para visualizar cual es el módulo correcto.
A continuación, observaremos la vista de usuario de la página con detalle.
Al inicio tenemos la página principal donde el usuario puede elegir.
10
Tenemos la página de inicio en donde se muestran los criterios de evaluación de esta pagina.
En la sección de cifrado ASCII, tenemos dos tipos de opciones:
La primera donde se podrá cifrar el texto:
11
La segunda donde se podrá descifrar el texto:
En la sección de cifrado UNICODE, tenemos sólo una opción:
12
Por último está la documentación, donde posiblemente se este leyendo esto.
13
Conclusión
Escareño Perez Armando: El cifrado César, aunque simple y fácil de descifrar en la era moderna,
es una excelente introducción a los conceptos de cifrado. Su simplicidad permite entender los
principios básicos de la seguridad de la información. Aunque no es adecuado para alta seguridad,
puede ser útil donde el nivel de seguridad requerido no es alto, o como una capa adicional en
combinación con otros métodos de cifrado más robustos. La seguridad de la información depende
tanto del algoritmo de cifrado como de cómo se manejan y protegen las claves de cifrado.
Hernández Martínez Leonardo Javier: En esta práctica, hemos explorado la implementación de
un algoritmo de cifrado y descifrado en JavaScript, que utiliza un valor de módulo para proteger la
información sensible. A través de la comprensión de este algoritmo, hemos podido apreciar la
importancia de la seguridad de la información en el desarrollo de aplicaciones y sistemas.
Al utilizar técnicas de cifrado, como la que hemos analizado, los desarrolladores pueden garantizar
la confidencialidad de los datos transmitidos o almacenados, lo que es crucial en entornos donde la
privacidad y la seguridad son prioritarias.
Además, hemos observado cómo las funciones de actualización dinámica de la interfaz de usuario
permiten una experiencia más fluida para el usuario, al proporcionar retroalimentación instantánea
sobre los resultados del cifrado y descifrado a medida que se ingresan los datos.
En resumen, esta práctica nos ha brindado una visión más profunda de los fundamentos del cifrado,
destacando su importancia en el ámbito de la seguridad de la información y su aplicación práctica en
el desarrollo de aplicaciones web y sistemas informáticos.
Varela Martínez Jaime Adolfo: Al finalizar este proyecto se logró cumplir satisfactoriamente el
objetivo del mismo, se ha creado completamente un sitio web el cual permite cifrar y descifrar texto
por ASCII y UNICODE dando opción al usuario de elegir el módulo de cifrado, personalmente
considero que el sitio tiene un buen aspecto para el usuario, sencillo y es fácil de utilizar, ahora
podremos cifrar nuestros mensajes a nuestro gusto, pues, hemos comprendido lo básico de cifrar.
